import React, { Component } from 'react';
import '../styles/Details/DetailsPage.scss'
import * as service from '../api/index'
import { NavBar, Skeleton } from 'antd-mobile'
import TopBox from '../components/TopBox';
import DetailsSwiper from '../components/Details/DetailsSwiper';
import DetailsFooter from '../components/Details/DetailsFooter';

class DetailsPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            goodinfo: [],
            swiperlist: []
        }
    }
    componentDidMount() {
        //请求商品的详情
        service.good_goodinfo({ goodid: this.props.match.params.id }).then((res) => {
            //处理服务端返回的图片列表, 将数组+字符串转换为 数组+对象
            res.data.goodinfo.pics =
                res.data.goodinfo.pics &&
                res.data.goodinfo.pics.map((item, index) => {
                    return { pic: item };
                })

            //保存商品详情
            this.setState({
                goodinfo: res.data.goodinfo
            })
            console.log(res.data.goodinfo);
        })
    }
    back() {
        //返回上一个路由
        this.props.history.go(-1);
    }
    render() {
        return (
            <div className='DetailsPage'>
                {/*商品详情页 */}
                {/* 返回顶部 */}
                {<TopBox />}
                {/* 返回上一页 */}
                <NavBar onBack={() => { this.back() }}>商品详情</NavBar>
                {/* 商品详情 */}
                {
                    this.state.goodinfo.pics &&
                        this.state.goodinfo.pics.length ?
                        <>
                            {/* 轮播图 */}
                            <DetailsSwiper swiperlist={this.state.goodinfo.pics} />
                            <div className='goodsDetails'>
                                {/* 商品名称 */}
                                <div className="name">
                                    {this.state.goodinfo.brandEN} &nbsp;
                                    {this.state.goodinfo.brand} &nbsp;
                                    {this.state.goodinfo.name}
                                </div>
                                {/* 商品价格 */}
                                <div className="price">
                                    ¥ {
                                        this.state.goodinfo.salesPrice ?
                                            this.state.goodinfo.salesPrice.value : 0
                                    }
                                </div>
                            </div>
                        </>
                        :
                        <>
                            <Skeleton.Title animated />
                            <Skeleton.Paragraph lineCount={10} animated />
                        </>
                }
                <DetailsFooter/>
            </div>
        );
    }
}

export default DetailsPage;